<template>
  <div>
    <!-- <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-end align-items-center">
        <el-button type="primary" @click="onAdd()">添加</el-button>
      </div>
    </div> -->
    <div class="app_card pt-4  pb-5">
      <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable"
        height="calc(100vh - 230px)">
        <el-table-column label="节次" prop="sort" align="center" width="300">
          <template #default="scope">{{ "第" + scope.row.sort + "节" }}</template>
        </el-table-column>
        <el-table-column label="开始时间" prop="startDate" align="center">
          <template #default="scope">{{ scope.row.startTime }}</template>
        </el-table-column>
        <el-table-column label="结束时间" prop="endDate" align="center">
          <template #default="scope">{{ scope.row.endTime }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="320" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="onEditRow(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination ref="paginationRef" @handleChange="handleChange" />
    </div>
    <edit-dialog ref="editDialogRef" @success="loadData()"></edit-dialog>
  </div>
</template>

<script setup>
/**
 * 操作日志
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
//组件
import Pagination from '@/components/pagination/index.vue';
import EditDialog from './EditDialog.vue';
// ======================================================
//                      变量声明
// ======================================================

const loading = ref(false);
// 表格查询参数
const queryParam = ref({
  sort: "Id",
  order: "asc",
  limit: 10,
  page: 1,
})


// 组件引用
const paginationRef = ref(null);
const editDialogRef = ref(null);
// 表格数据
const dataOfTable = ref([]);

// ======================================================
//                      处理事件
// ======================================================

// 点击新增按钮
const onAdd = (row = null) => {
  editDialogRef.value.show(0, "添加");
}

// 点击行内编辑按钮
const onEditRow = (row) => {
  editDialogRef.value.show(row.id, "编辑 ", row);
}

// 点击行内删除按钮
const onDeleteRow = (row) => {
  ElMessageBox.confirm("确定要删除该记录吗？", "警告").then(() => {
    EsAjax.delete(ApiUrls.articleCategoryDelete, { params: { id: row.id } })
      .then(res => {
        if (res.data.code != 200) {
          ElMessage.warning(res.data.data + res.data.msg);
          return;
        }
        loadData();
      })
      .catch(err => { ElMessage.error("网络错误：", err.message) });
  }).catch(() => { });
  console.log(row)
}

// 处理分页尺寸
const handleChange = (data = null) => {
  queryParam.value.page = data?.page;
  queryParam.value.limit = data?.limit;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================
const loadData = () => {
  let _queryParam = queryParam.value
  _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
  loading.value = true
  EsAjax.post(ApiUrls.timetableconfigDatagrid, _queryParam).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    let { list, totalCount } = res.data.data
    dataOfTable.value = list;
    paginationRef.value?.changeTotal({ totalCount: totalCount })
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false
  })
}

onMounted(() => {
  loadData();
})

</script>
<style lang="less" scoped></style>

